<!--
 @description 菜单按钮
 @fileName MenuButton.vue
 @author zengqiongying
 @created 2023/06/17 13:51:58
-->
<template>
  <div ref="menuRef" class="btn-menu" @click.stop="onClickMenu">
    <!-- <div v-show="showPop" class="opt-pop">
      <div v-if="operator.includes('edit')" class="o-btn edit" @click.stop="onClickEdit">编辑</div>
      <div v-if="operator.includes('delete')" class="o-btn del" @click.stop="onClickDelete">删除</div>
    </div> -->
  </div>
  <qmp-popup
    v-model:show="showPop"
    teleport="body"
    :style="{
      left: `${popRect.clientX}px`,
      top: `${popRect.clientY}px`,
      transform: `translate3d(-50%, 0, 0)`,
      'border-radius': '4px'
    }"
    lock-scroll
    close-on-popstate
  >
    <slot>
      <div class="opt-pop">
        <div v-if="operator.includes('edit')" class="o-btn edit" @click.stop="onClickEdit">编辑</div>
        <div v-if="operator.includes('delete')" class="o-btn del" @click.stop="onClickDelete">删除</div>
      </div>
    </slot>
  </qmp-popup>
</template>

<script lang="ts">
  import { useClickAway, useRect } from '@vant/use'
  import { ref, toRefs, defineComponent, reactive, onMounted, onUnmounted } from 'vue'
  export default defineComponent({
    name: 'MenuButton',
    props: {
      operator: {
        type: Array,
        default: () => {
          return ['edit', 'delete']
        }
      }
    },
    emits: ['edit', 'delete'],
    setup(props, { emit }) {
      const menuRef = ref()
      const datas = reactive({
        showPop: false,
        popRect: {}
      })
      const onClickEdit = () => {
        emit('edit')
        datas.showPop = false
      }
      const onClickDelete = () => {
        emit('delete')
        datas.showPop = false
      }
      const onClickMenu = () => {
        datas.showPop = !datas.showPop
        const rect = useRect(menuRef.value)
        datas.popRect = {
          clientX: rect.x - rect.width,
          clientY: rect.y + rect.height
        }
      }

      /* const onClickOutside = (e: any) => {
        // 判断鼠标点击到触发按钮和弹出框外的区域
        const el = menuRef.value
        if (el && el.contains && el.contains(e.target)) {
          return
        }
        datas.showPop = false
      }
      onMounted(() => {
        document.addEventListener('click', onClickOutside)
      })
      onUnmounted(() => {
        window.removeEventListener('click', onClickOutside)
      })
      useClickAway(menuRef, () => {
        console.log('click outside!')
      }) */
      return {
        ...toRefs(datas),
        menuRef,
        onClickMenu,
        onClickEdit,
        onClickDelete
      }
    }
  })
</script>
<style lang="less" scoped>
  .btn-menu {
    position: relative;
    width: 20px;
    height: 20px;
    background: url(~@/assets/images/menu-more.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
  }

  .opt-pop {
    /* position: absolute;
    z-index: 9;
    right: 0;
    top: 20px; */
    width: 80px;
    background: var(--bg-global-weaker);
    border-radius: var(--radius-l);
    border: 1px solid var(--divisionline-normal);
    padding: 4px 8px;
    box-sizing: border-box;
    .o-btn {
      display: flex;
      align-items: center;
      height: 36px;
      padding-left: 28px;
      font: var(--font-main-body);
      color: var(--texticon-default-strong);
      background-size: 20px 20px;
      background-repeat: no-repeat;
      background-position: left center;
      &.edit {
        background-image: url(~@/assets/images/icon-edit.png);
      }
      &.del {
        background-image: url(~@/assets/images/icon-del.png);
      }
    }
  }
</style>
